/*
    该文件是用来创建路由配置的文件
    createRouter  用来创建路由对象的方法
    createWebHistory  用来创建路由模式的方法 (History)
    History: 路径前面用的是 / 开头，一般需要配合后端使用，容易产生 404
    createWebHashHistory 创建路由模式的方法 (Hash)
    Hash: 路径前面是 # 开头，无需后端配合，使用更安全，但是路径不够美观
*/
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'

// 导入路由页面
import HomeView from '../views/HomeView.vue'

import store from '../store'

// 导入管理员和用户列表的组件
import ManagerIndexViewVue from '@/views/manager/ManagerIndexView.vue'
import ManagerListViewVue from '@/views/manager/ManagerListView.vue'
import UserListViewVue from '@/views/manager/UserListView.vue'

// 导入轮播图管理
import BannerIndexViewVue from '@/views/banner/BannerIndexView.vue'
import BannerListViewVue from '@/views/banner/BannerListView.vue'
import AddBannerViewVue from '@/views/banner/AddBannerView.vue'

// 导入商品管理页面
import ProIndexViewVue from '@/views/pro/ProIndexView.vue'
import ProListViewVue from '@/views/pro/ProListView.vue'
import AddProViewVue from '@/views/pro/AddProView.vue'

// excel 组件导入
import ExcelIndexViewVue from '@/views/excel/ExcelIndexView.vue'
import ExcelImportViewVue from '@/views/excel/ExcelImportView.vue'
import ExcelExportViewVue from '@/views/excel/ExcelExportView.vue'







// 路由规则
export const routes = [
  {
    // path  是访问页面时的路径
    path: '/',
    // 命名路由，给路由起一个 别名
    name: 'home',
    // 访问当前路由路径的时候需要显示的组件
    component: HomeView,
    // 路由嵌套，配置的二级路由
    children: [
      {
        path: 'manager',
        label: '账号管理',
        name: 'manager',
        icon: 'UserFilled',
        component: ManagerIndexViewVue,
        // 路由嵌套的三级路由
        children: [
          {
            path: 'managerList',
            label: '管理员列表',
            icon: 'User',
            name: 'managerList',
            component: ManagerListViewVue
          }, {
            path: 'userList',
            label: '用户管理',
            icon: 'Avatar',
            name: 'userList',
            component: UserListViewVue
          }
        ]
      },
      {
        path: 'banner',
        label: '轮播图管理',
        name: 'banner',
        icon: 'HelpFilled',
        component: BannerIndexViewVue,
        // 路由嵌套的三级路由
        children: [
          {
            path: 'bannerList',
            label: '轮播图列表',
            icon: 'PictureFilled',
            name: 'bannerList',
            component: BannerListViewVue
          }, {
            path: 'addBanner',
            label: '添加轮播图',
            icon: 'CirclePlus',
            name: 'addBanner',
            component: AddBannerViewVue
          }
        ]
      }, {
        path: 'pro',
        name: 'pro',
        label: '商品管理',
        icon: 'Shop',
        component: ProIndexViewVue,
        children: [
          {
            path: 'proList',
            name: 'proList',
            label: '商品列表',
            icon: 'ShoppingBag',
            component: ProListViewVue,
          }, {
            path: 'addPro',
            name: 'addPro',
            label: '添加商品',
            icon: 'FirstAidKit',
            component: AddProViewVue,
          }
        ]
      }, {
        path: 'excel',
        name: 'excel',
        label: '文件管理',
        icon: 'Shop',
        component: ExcelIndexViewVue,
        children: [
          {
            path: 'excelImport',
            name: 'excelImport',
            label: '文件导入',
            icon: 'ShoppingBag',
            component: ExcelImportViewVue,
          }, {
            path: 'excelExport',
            name: 'excelExport',
            label: '文件导出',
            icon: 'FirstAidKit',
            component: ExcelExportViewVue,
          }
        ]
      }, {
        path: 'echarts',
        name: 'echarts',
        label: '图表管理',
        icon: 'Shop',
        component: () => import('../views/echarts/EChartsIndexView.vue'),
        children: [
          {
            path: 'echartsShow',
            name: 'echartsShow',
            label: 'echarts',
            icon: 'ShoppingBag',
            component: () => import('../views/echarts/EChartsShowView.vue'),
          },
          {
            path: 'echartsTest',
            name: 'echartsTest',
            label: 'echartsTest',
            icon: 'ShoppingBag',
            component: () => import('../views/echarts/EChartsTestView.vue'),
          }
        ]
      }, {
        path: 'editor',
        name: 'editor',
        label: '编辑器管理',
        icon: 'Shop',
        component: () => import('../views/editor/EditorIndexView.vue'),
        children: [
          {
            path: 'editorShow',
            name: 'editorShow',
            label: '富文本编辑器',
            icon: 'ShoppingBag',
            component: () => import('../views/editor/EditorShowView.vue'),
          }
        ]
      }, {
        path: 'map',
        name: 'map',
        label: '地图管理',
        icon: 'Shop',
        component: () => import('../views/map/MapIndexView.vue'),
        children: [
          {
            path: 'mapShow',
            name: 'mapShow',
            label: '百度地图',
            icon: 'ShoppingBag',
            component: () => import('../views/map/MapShowView.vue'),
          }
        ]
      }, {
        path: 'vuex',
        name: 'vuex',
        label: '状态管理',
        icon: 'Shop',
        component: () => import('../views/vuex/VuexIndexView.vue'),
        children: [
          {
            path: 'vuexShow',
            name: 'vuexShow',
            label: 'Vuex状态管理',
            icon: 'ShoppingBag',
            component: () => import('../views/vuex/VuexShowView.vue'),
          },{
            path: 'vuexHooks',
            name: 'vuexHooks',
            label: 'vuexHooks管理',
            icon: 'ShoppingBag',
            component: () => import('../views/vuex/VuexHooksView.vue'),
          }
        ]
      }
    ]
  },
  {
    path: '/login',
    name: 'login',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    // AMD(先加载再使用)  CMD(什么时候用什么时候加载)
    // 路由的懒加载，对于一些不确定是否立即显示的页面，可以使用路由懒加载
    component: () => import('../views/LoginView.vue')
  },
  {
    path: '/error',
    name: 'error',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    // AMD(先加载再使用)  CMD(什么时候用什么时候加载)
    // 路由的懒加载，对于一些不确定是否立即显示的页面，可以使用路由懒加载
    component: () => import('../views/error/ErrorView.vue')
  },
  // 404 的写法
  { path: '/:pathMatch(.*)', component: () => import('../views/error/ErrorView.vue') }
]


// 创建路由对象
const router = createRouter({
  // 配置路由模式
  history: createWebHashHistory(import.meta.env.BASE_URL),
  // 路由规则
  routes
})

// 路由的全局前置守卫
router.beforeEach((to, from) => {
  // to 将要进入的路由信息
  // form 是原来的路由信息
  // console.log(to, from);

  // console.log(store.state.userInfo);
  if (store.state.userInfo.checkedkeys && store.state.userInfo.adminname != 'admin') {
    const arr = ['/', '/login', '/error']

    // console.log(store.state.userInfo.checkedkeys);
    store.state.userInfo.checkedkeys.forEach(item => {

      // 将二级路由也加入到权限列表
      arr.push('/' + item.path)

      // console.log(item);
      item.children.forEach(t => {
        const path = '/' + item.path + '/' + t.path
        // if (path == to.path) {
        //   // 有权限
        arr.push(path)
        // } else {
        //   // 没有权限
        //   return
        // }
      })
    })

    // console.log(arr.includes(to.path));


    if (!arr.includes(to.path)) {
      // 没有权限访问
      return { name: 'error' }
    }
  }


  // ...
  // 返回 false 以取消导航
  // return false
})



// 导出路由配置
export default router
